<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="../res/css/weui.css" />
    <link rel="stylesheet" href="../res/css/weuix.css" />
    <link rel="stylesheet" href="../res//css/common.css">
    <link rel="stylesheet" href="../res/css/swiper.css">
    <script src="../res/js/zepto.min.js"></script>
    <script src="../res/js/zepto.weui.js"></script>
    <script src="../res/js/common.js?v=1"></script>
    <script src="../res/js/swiper.js"></script>
    <script src="../res/js/socket.js"></script>
</head>
<style scoped>
    html{
        overflow-x: hidden;
    }

    .weui-cell {
        padding: 0;
    }

    .weui-cell_select .weui-select {
        padding-right: 0;
    }

    .weui-select {
        width: 65px;
    }

    .weui-cell_select .weui-cell__bd:after {
        border-width: 0 2px 2px 0;
        margin-top: -8px;
    }

    .pickerDiv {
        display: flex;
    }

    .triangle {
        width: 10px;
        height: 7px;
        position: absolute;
        top: 18px;
        right: 10px;
    }

    .divWrapper {
        height: 75vh;
        width: 95%;
        margin: 5px 2.5%;
        overflow-y: scroll;
    }

    .noData {
        height: 75vh;
        width: 95%;
        margin: 5px 2.5%;
    }

    .noData img {
        width: 370px;
        height: 270px;
        margin-top: 100px;
    }

    .divItem {
        background: #FFFFFF;
        border-radius: 8px;
        margin-bottom: 10px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #353535;
        padding: 10px 15px;
        font-size: 14px;
    }

    .divItem .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
    }

    .divItem .message{
        margin-bottom: 5px;
    }
    .divItem .message span:first-child{
        color: #757575;font-weight: 500;
    }


    .chooseBtn {
        margin: 0 5%;
        /* margin-top: 20px; */
        width: 90%;
        height: 49px;
        background: #1189FF;
        border-radius: 8px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FEFEFE;
        line-height: 49px;
        text-align: center;
    }

    .icon {
        width: 71px;
        height: 42px;
    }

    .background {
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 99;
    }

    .useList {
        width: 100%;
        position: fixed;
        bottom: 0;
        background-color: #fff;
        z-index: 999;
        border-radius: 5px 5px 0 0;
    }

    .useItem {
        width: 90%;
        height: 40px;
        line-height: 40px;
        padding: 5px 0;
        margin: 0 5%;
        border-bottom: 1px solid #E0E0E0;
        text-align: center;
        font-size: 15px;
    }
</style>

<body ontouchstart>
    <div class="fixed-top">
        <div class="weui-header weui-btn_primary">
            <div class="weui-header-left"><a id="btnBack" class="icon icon-109"></a></div>
            <div class="weui-header-title">检查检验</div>
            <div class="weui-header-right"></div>
        </div>
    </div>
    <div class="pickerDiv">
        <div class="weui-cell weui-cell_select" style="margin: 10px 2px;">
            <div class="weui-cell__bd">
                <input class="weui-select" id="askType" type="text" value="检测">
            </div>
        </div>
        <div style="display: flex;">
            <div class="weui-cell" style="margin: 10px 0;margin-left: 5px;border-radius: 10px 0 0 10px">
                <div class="weui-cell__bd" style="display: flex;">
                    <input class="weui-input" id="start-time" type="text" value="" placeholder="选择开始时间"
                        style="margin-left: 10px;padding-top: 2px;">
                    <p>至</p>
                </div>
            </div>
            <div class="weui-cell" style="margin: 10px 0;border-radius:0 10px 10px 0">
                <div class="weui-cell__bd">
                    <input class="weui-input" id="end-time" type="text" value="" placeholder="选择结束时间"
                        style="margin-left: 10px;padding-bottom: 2px;">
                    <img src="../res/images/arrow-spread.png" alt="" class="triangle">
                </div>
            </div>
        </div>
    </div>
    <div class="divWrapper" id="inspectionList">
        <!-- <div class="divItem" onclick="toDetail()">
            <div class="title">
                <div>血常规</div>
                <img src="../res/images/img_result_have.png" alt="" class="icon">
            </div>
            <div class="message">
                <span>受检者:</span>
                <span>速速</span>
            </div>
            <div class="message">
                <span>受检者:</span>
                <span>2021-12-02 16:36:26</span>
            </div>
        </div>
        <div class="divItem">
            <div class="title">
                <div>血常规</div>
                <img src="../res/images/img_result_nothing.png" alt="" class="icon">
            </div>
            <div class="message">
                <span>受检者:</span>
                <span>速速</span>
            </div>
            <div class="message">
                <span>受检者:</span>
                <span>2021-12-02 16:36:26</span>
            </div>
        </div> -->
    </div>
    <!-- <div class="noData">
        <img src="../res/images/img_empty_state@2x.png" alt="">
        <div style="text-align: center;">暂无报告(就诊人：林琳)</div>
    </div> -->
    <div class="chooseBtn" onclick="openChooseUser()">
        更换需查询的就诊人
    </div>
    <div class="background" style="display: none;" onclick="$(this).hide();$('.useList').hide()"></div>
    <div class="useList" style="display: none;">
        <div class="useItem">张三疯<span style="color: #757575;" onclick="chooseUser()">(子女)</span></div>
        <div class="useItem">张三疯<span style="color: #757575;">(子女)</span></div>
        <div class="useItem">张三疯<span style="color: #757575;">(子女)</span></div>
        <div class="useItem">张三疯<span style="color: #757575;">(子女)</span></div>
    </div>
</body>

<script>
    var startTime = "",
        endTime = "",
        startTimeString = "",
        endTimeString = "";
    inquiryType = ""
    $(function () {
        $("#askType").picker({
            title: "选择问诊方式",
            cols: [{
                textAlign: 'center',
                values: ['检测', '检查']
            }],
            onClose: function (p, v, d) {
                if (p.value[0] == "图文问诊") {
                    inquiryType = 1;
                } else if (p.value[0] == "视频问诊") {
                    inquiryType = 2;
                } else if (p.value[0] == "家庭医生") {
                    inquiryType = 3;
                } else if (p.value[0] == "全部") {
                    inquiryType = "";
                } else {
                    inquiryType = 4;
                }
                showDoctor(department_id, inquiryType)
            }
        });
        //选择时间
        $("#start-time").datetimePicker({
            title: '限定年月',
            years: [2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023],
            monthes: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
            onClose: function (p, v, d) {
                startTime = "";
                startTimeString = "";
                p.value.forEach((item, index) => {
                    startTimeString += item;
                    if (index <= 2) {
                        if (index == 2) {
                            startTime += item + " ";
                        } else {
                            startTime += item + '-';
                        }
                    } else {
                        startTime += item + ':';
                    }
                })
                startTime = startTime + '00';
                if (endTimeString == "" || startTimeString < endTimeString) {
                    console.log(1);
                    var paramJson = {
                        "current": 1, //当前页,示例值(1)
                        "endTime": endTime, //结束时间
                        "size": 100, //每页大小,示例值(10)
                        "startTime": startTime //开始时间
                    }
                    // newAjaxPost('/h5/myInterrogation/getInterrogationHistoryList', paramJson,
                    // 	getHistoryOk)
                } else {
                    msgInfo("结束时间不可早于开始时间")
                }
            }
        });
        $("#end-time").datetimePicker({
            title: '限定年月',
            years: [2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023],
            monthes: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
            onClose: function (p, v, d) {
                endTime = "";
                endTimeString = "";
                p.value.forEach((item, index) => {
                    endTimeString += item;
                    if (index <= 2) {
                        if (index == 2) {
                            endTime += item + " ";
                        } else {
                            endTime += item + '-';
                        }
                    } else {
                        endTime += item + ':'
                    }
                })
                endTime = endTime + '00'
                $(".triangle").hide()
                if (startTimeString == "" || startTimeString < endTimeString) {
                    var paramJson = {
                        "current": 1, //当前页,示例值(1)
                        "endTime": endTime, //结束时间
                        "size": 100, //每页大小,示例值(10)
                        "startTime": startTime //开始时间
                    }
                    // newAjaxPost('/h5/myInterrogation/getInterrogationHistoryList', paramJson,
                    // 	getHistoryOk)
                } else {
                    msgInfo("结束时间不可早于开始时间")
                }
            }
        });

        //返回上页
        $('#btnBack').on("click", function () {
            // history.go(-1);
            // goPage("inquiry_doctor_index.htm");
            goPage("inquiry_user_personal.htm");
        });

        renderOfList()
    })

    // 检验列表渲染
    function renderOfList() {
        let modal = ``
        for(var i = 0; i < 5; i++){
            modal += `
            <div class="divItem">
                <div class="title">
                    <div>血常规</div>
                    <img src="${ifResult(i % 2)}" alt="" class="icon">
                </div>
                <div class="message">
                    <span>受检者:</span>
                    <span>${i}</span>
                </div>
                <div class="message">
                    <span>受检时间:</span>
                    <span>${i}:00</span>
                </div>
            </div>`
        }

        $("#inspectionList").html(modal)
    }

    function ifResult(res) {
        let resultOK = '../res/images/img_result_have.png'
        let notResult = '../res/images/img_result_nothing.png'

        return res ? resultOK : notResult
    }

    function openChooseUser() {
        $(".background").show()
        $(".useList").show()
    }

    // 选择角色
    function chooseUser() {
        $(".background").hide()
        $(".useList").hide()
    }

    //跳转到检查检验单详情
    function toDetail(){
        goPage("inspection_detail.htm");
    }
</script>

</html>